<script lang="ts" setup>
import type { VxeTableGridOptions } from '#/adapter/vxe-table'
import type { scmGoodsData } from '#/views/backend/scmGoods/config'

import { defineEmits, ref } from 'vue'

import { Input, Modal } from 'ant-design-vue'

import { useVbenVxeGrid } from '#/adapter/vxe-table'
import { getPurchaseBomDetailList } from '#/api/purchase'

const emit = defineEmits<EmitEvents>()
const isModalVisible = ref(false)
// 定义要发送的事件 会返回成品档案列表
type EmitEvents = {
  pushData: [data: {}]
}
const gridOptions: VxeTableGridOptions<scmGoodsData> = {
  checkboxConfig: {
    highlight: true,
    reserve: true,
    showReserveStatus: true,
  },
  height: 500,
  columns: [
    { type: 'radio', width: 70, fixed: 'left' },
    { field: 'purchase.caigou_id', title: '采购单号', width: 100 },
    { field: 'purchase.purchase_sn', title: '手工单号', width: 120 },
    { field: 'materialSku.sku_sn', title: '物料编号', width: 140 },
    { field: 'material.material_name', title: '物料名称', width: 200 },
    { field: 'purchase.purchase_time', title: '下单日期', width: 110 },
    { field: 'supply.SupplyNa', title: '供货商', width: 120 },
    { field: 'expired_price', title: '超期预扣', width: 120 },
    { field: 'price', title: '采购价', width: 80 },
    { field: 'remark', title: '备注', width: 200 },
  ],
  exportConfig: {},
  keepSource: true,
  proxyConfig: {
    ajax: {
      query: async ({ page }) => {
        // 2. 调接口
        const res = await getPurchaseBomDetailList({
          page: page.currentPage,
          limit: page.pageSize,
          quick_search: quick_search.value,
        })

        return { items: res.list, total: res.total }
      },
    },
    sort: true,
  },
  toolbarConfig: {
    search: true,
    custom: true,
    export: true,
    // import: true,
    refresh: true,
    zoom: true,
  },
}

const [Grid, gridApi] = useVbenVxeGrid({ gridOptions })

/**
 *  快速查询查询
 */
const quick_search = ref()
function doSearch() {
  gridApi.query()
}

/**
 * 处理推送按钮点击事件
 */
function handleOk() {
  const checkData: any = gridApi.grid.getRadioRecord()
  emit('pushData', { ...checkData })
  isModalVisible.value = false
}

// 打开模态框
const openModal = () => {
  isModalVisible.value = true
}

function handleCancel() {
  isModalVisible.value = false
}

// 暴露打开模态框的方法给父组件
defineExpose({
  openModal,
})
</script>

<template>
  <Modal v-model:open="isModalVisible" title="采购明细列表" width="60%" @ok="handleOk" @cancel="handleCancel" ok-text="确认" cancel-text="取消">
    <Grid style="">
      <template #toolbar-tools>
        <Input v-model:value="quick_search" allow-clear placeholder="供应商，物料名称模糊搜索" style="width: 300px; margin-right: 8px" @change="doSearch" />
      </template>
    </Grid>
  </Modal>
</template>
<style lang="scss" scoped></style>
